<template>
	<div class="login_content">
		<div class="login_item" v-if="toChangePass">
			<div class="login_main">
				<h2>依米互动</h2>
				<el-form>
					<el-form-item>
						<el-row>账号</el-row>
						<el-input v-model='loginInfo.BusinessNo' :maxlength='50' type='text' size='mini'></el-input>
					</el-form-item>
					<el-form-item>
						<el-row type='flex' justify="space-between"> 
							<span>密码</span>
							<a style="color: #3185FF;" @click="toChangePassFn">修改密码</a>
						</el-row>
						<el-row type='flex' justify="space-between">
							<el-input  type="password" v-model='loginInfo.PassWord' :maxlength='15'  size='mini'></el-input>
							<img class="passIcon" src='../assets/img/password.png' />
						</el-row>
					</el-form-item>

					
				</el-form>
			    <button  class="el-button el-button--small loginBtn" @click="loginSubmit">登录</button>
				
				
			</div>
		</div>
		<div class="login_item" v-else>
			<div class="login_main">
				<h2>依米互动</h2>
				<el-form>
					<el-form-item>
						<el-row>账号</el-row>
						<el-input v-model='passwordInfo.account' placeholder='请输入您的账号' :maxlength='50'  size='mini'></el-input>
					</el-form-item>
					<el-form-item>
						<el-row><span>旧密码</span></el-row>
						<el-row type='flex' justify="space-between">
							<el-input  type="password" v-model='passwordInfo.password' placeholder='请输入旧密码' :maxlength='15' size='mini'></el-input>
						</el-row>
					</el-form-item>
					<el-form-item>
						<el-row><span>新密码</span></el-row>
						<el-row>
							<el-input  type="password" v-model='passwordInfo.newPass' placeholder='请输入新密码'  :maxlength='15'  size='mini'></el-input>
						</el-row>
					</el-form-item>
					<el-form-item>
						<el-row><span>再次输入新密码</span></el-row>
						<el-row>
							<el-input  type="password" v-model='passwordInfo.againPass' placeholder='请再次输入新密码'  :maxlength='15' size='mini'></el-input>
						</el-row>
					</el-form-item>
					<div style="position: relative;">
						<button  class="el-button el-button--small loginBtn" @click="submitChange">确定修改</button>
						<el-button style='position: absolute;bottom: 0;right: 0;' type='text' size='mini' @click='goLoginPage'>返回</el-button>
					</div>
					
					
				</el-form>
			</div>
		</div>
		<div class="login_item">
			<img src="../assets/img/login.png" width="100%" height="100%"/>
		</div>
	</div>
</template>

<script>
import global from './global'
   export default {
    name: "Login",
    inject:['reload'],
    mounted(){
    	console.log(global.urlAll)
    },
    data() {
    	return {
    		loginInfo:{
    			BusinessNo: "",
    			PassWord: "",
    		},
    		toChangePass: true,
    		passwordInfo:{
    			account: '',
    			password: '',
    			newPass: '',
    			againPass: ''
    		}
    	}
    },
    methods:{
    	loginSubmit(){
    		let _this = this;
    		if(this.loginInfo == ''){
    			this.$message('请填写登录账号')
    		}else if(this.loginInfo.password == ''){
    			this.$message('请填写账号密码')
    		}else{
    			let sendData = new FormData();
    			sendData.append('BusinessNo',_this.loginInfo.BusinessNo)
    			sendData.append('PassWord',_this.loginInfo.PassWord)
    			let config = {
					           headers:{
					             	 'Content-Type':'application/x-www-form-urlencoded',
					              }
					         };
    			const formRequest = global.$http.create({ 
				      			widthCredentials : true
				      		})
				formRequest.post(global.urlAll+'PcLogin/',sendData,config).then((res)=>{
					           
					           if(res.data.success == 'true'){
						           	$.cookie("userAuth",res.data.data.status)
						           	$.cookie("userId",res.data.data.id)
						           	$.cookie("Score",res.data.data.Score)
						           	
						           	if(res.data.data.status == '2'){
						           	   _this.$router.push('/UserModel')
						           	 }else{
						           	 	_this.$router.push('/BussModel')
						           	 }
					           }else{
					           		_this.$message(res.data.msg)
					           }
				      		})
    			
    		}
    	},
    	submitChange(){
    		var _this = this;
//	        var reg = /^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]{8,16})$/;
//	        else if(!reg.test(this.passwordInfo.newPass)){
//	          this.$message.error("请输入格式为字母+数字组合8到16位的新密码");
//	          return;
//	        }
	        
	        //readonly 
	        if(this.passwordInfo.account==''){
	          this.$message('请输入登录账号')
	          return;
	        }else if(this.passwordInfo.password==''){
	          this.$message('请输入密码')
	          return;
	        }else if(this.passwordInfo.newPass==''){
	          this.$message('请输入新密码')
	          return;
	        }else if(this.passwordInfo.againPass==''){
	          this.$message('请再次输入新的密码')
	          return;
	        }else if(this.passwordInfo.newPass!==this.passwordInfo.againPass){
	          this.$message('两次输入密码不一致')
	          return;
	        }else{
	        	let sendData = new FormData();
    			sendData.append('BusinessNo',_this.passwordInfo.account)
    			sendData.append('OldPassWord',_this.passwordInfo.password)
    			sendData.append('NewPassWord',_this.passwordInfo.newPass)
    			
    			let config = {
					           headers:{
					             	 'Content-Type':'application/x-www-form-urlencoded',
					              }
					         };
    			const formRequest = global.$http.create({ 
				      			widthCredentials : true
				      		})
				formRequest.post(global.urlAll+'UpdateBusinessPassword/',sendData,config).then((res)=>{
				      			if(res.data == 'success'){
				      				_this.toChangePass = true;
				      			}
				      		})
	        }
    	},
    	goLoginPage(){
    		this.toChangePass = true;
    		this.passwordInfo.account = "";
    		this.passwordInfo.password = "";
    		this.passwordInfo.newPass = "";
    		this.passwordInfo.againPass = "";
    	},
    	toChangePassFn(){
    		this.loginInfo.BusinessNo = "";
    		this.loginInfo.PassWord = "";
    		this.toChangePass = false;
    	}
    }
   }
	
</script>

<style scoped="scoped">
	.login_content{
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 100%;
	}
	.login_content .login_item{
		width: 50%;
		height: 100%;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.loginBtn{
		background: #3185FF;
		color: #FFFFFF;
		width: 106px;
		height: 40px;
		margin-top: 30px;
	}
	.login_main{
		width: 340px;
		height: 400px;
	}
	h2{
		color: #444A58;
		font-size: 40px;
	}
	.el-input__inner{
		height:30px;
	}
	.el-form-item{
		margin-top: 10px;
		height: 60px;
	}
	.passIcon{
		width: 24px;
		height: 16px;
		position: absolute;
		right: 10px;
		top: 12px;
	}
</style>